<template>
    <div class="fc-suspension" v-if="suspension"
        :class="{'active':isActive,'toBottom':toBottom,'hided':suspensionHide,'fc-suspension-annimation':suspensionMsg.isNeedAnimation}">
        <img :class="{'dd': shake}" src="../../../assets/images/redEnvelope/red-icon.png" alt="">

        <van-circle style="width: 0.56rem; height: 0.56rem;" v-model="currentRate" :rate="rate" :speed="speed"
            :color="gradientColor" :stroke-width="70" />
    </div>
</template>

<script>
import Vue from "vue";
import { Circle } from "vant";
Vue.use(Circle);
export default {
    name: "RedEnvelope",
    props: {
        suspensionProps: {
            type: Object
        }
    },
    data () {
        return {
            // rate: 100,
            currentRate: 0,
            shake: false,
            gradientColor: {
                "0%": "#FF4133",
                "100%": "#FFDD33"
            },
            isActive: false,
            toBottom: true,
            suspension: true,
            suspensionHide: false,
            suspensionMsg: {
                image: "",
                hrefUrl: "",
                isNeedAnimation: true
            }
        };
    },
    mounted () {
        // this.init();
    },
    computed: {
        rate () {
            return this.$store.state.timeAll;
        },
        // 红包进度条的速度
        speed () {
            let a;
            if ((this.rate == 0) || (this.rate == 100)) {
                a = 10000;
            } else {
                a = 100 / (this.$store.state.timeTotal * 0.9);
            }
            return a;
        },
    },
    methods: {
        //   控制红包抖动
        handleShake () {
            this.shake = !this.shake
        },
    }
};
</script>

<style scoped lang="scss">
.van-circle {
    opacity: 0.5;
}
.fc-suspension {
    display: block;
    position: relative;
    left: 0.15rem;
    width: 0.56rem;
    height: 0.56rem;
    top: 1rem;
    img {
        pointer-events: none;
        width: 0.28rem;
        position: absolute;
        left: calc(50% - 0.14rem);
        top: calc(50% - 0.175rem);
        z-index: 6;
    }
}
.fc-suspension-annimation {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 3;
    -webkit-animation: toBottom 1s linear;
    -o-animation: toBottom 1s linear;
    animation: toBottom 1s linear;
}
@keyframes toBottom {
    0% {
        -webkit-transform: scale(0.1);
        -moz-transform: scale(0.1);
        -ms-transform: scale(0.1);
        -o-transform: scale(0.1);
        transform: scale(0.1);
        bottom: -1.18rem;
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        bottom: 0.55rem;
    }
}
// .fc-suspension.active{
//     -webkit-animation: volume 1s infinite linear;
//     -o-animation: volume 1s infinite linear;
//     animation: volume 1s infinite linear;
// }
@keyframes volume {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
.fc-suspension.hided {
    -webkit-animation: suspensionHide 0.8s infinite linear;
    -o-animation: suspensionHide 0.8s infinite linear;
    animation: suspensionHide 0.8s infinite linear;
}

@keyframes suspensionHide {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.1);
        -moz-transform: scale(0.1);
        -ms-transform: scale(0.1);
        -o-transform: scale(0.1);
        transform: scale(0.1);
    }
}
.suspensionHide {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1);
}
.dd {
    -webkit-animation: shakeTopx 0.8s infinite linear;
    -o-animation: shakeTopx 0.8s infinite linear;
    animation: shakeTopx 0.8s infinite linear;
}
@keyframes shakeTopx {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    5% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    10%,
    20%,
    30% {
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    15%,
    25%,
    35% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    40% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    45% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
</style>
